
<template>
  <div class="home">
    <div class="search-top">
      <div @click="linkTo('/searchResult?all=all')" class="search-list box">
         <img src="../../images/search-icon.png" alt="">
         搜索
      </div>
    </div>
    <section
      class="home-banner"
     >
      <header class="home-header">
        <!-- <div class="searchbar">
          <i class="serchbar-icon"></i>
          <input
            type="search"
            placeholder="搜索想要的商品、品牌"
            class="searchbar-input"
            @click="linkTo('/searchResult')"
          />
        </div> -->
      </header>
      <swiper
        auto
        dots-position="center"
        height="3.75rem"
       >
        <swiper-item
          class="swiper-demo-img"
          v-for="(item, index) in bannerArr"
          :key="index"
        >
          <div
            @click="advertClick(item)"
            :style="{backgroundImage:'url(' +item.bannerImageUrl+')'}"
            class="index-banner"
          ></div>
        </swiper-item>
      </swiper>
    </section>
    <section class="home-quicknav">
      <ul>
        <div
          @click="linkTo('/categora?type='+item.id)"
          v-for="(item,i) in quicknavs"
          class="quicknav-item"
          :key="i"
        >
          <img :src="item.imageUrl" />
          <div class="quinav-item__text">{{item.categoryName}}</div>
        </div>
      </ul>
    </section>
    <section class="home-content">
      <div class="scroller">
        <div
            class="scroller-container"
         >
          <div class="scroller-header">
            <span @click="activeIndexSelect('0')" :class="['tab-list',{'active':activeIndex == 0}]">热门兑换</span>
            <span class="arrow">|</span>
            <span  @click="activeIndexSelect('1')" :class="['tab-list',{'active':activeIndex == 1}]">新品上架</span>
            <span class="arrow">|</span>
            <span  @click="activeIndexSelect('2')" :class="['tab-list',{'active':activeIndex == 2}]">推荐商品</span>
            <span  @click="linkToR('/searchResult')">更多<i>></i></span>
          </div>
          <div class="scroller-wrapper scroller-xinpin">
            <div class="scroller-item">
              <div
                class="scroller-item__bd"
                v-for="(item,i) in hotList"
                :key="i"
  
                @click="linkTo('/goods_container',item.id)"
               >
                <div class="scroller-item__body">
                  <div
                    class="img"
                    :style="{backgroundImage:'url(' +item.exampleImageUrl.fileUrl+')'}"
                  ></div>
                  <span class="scroller-item__bd--desc">{{item.title}}</span>
                  <div class="scroller-item__bd--price">
                    <!-- <span class="price-icon"></span> -->
                    <div class="price-text">{{returnName(item.productType)}}<p>{{item.salePrice}}</p></div>
                    <!-- <p>￥{{item.linePrice}}</p> -->
                    <span class="price-num">{{item.productType != 'GOLD'?'销量':'兑换数量'}}：{{item.saleCount||0}}</span>
                    <!-- <p class="price-del"></p> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- <section class="home-content home-content-hot">
      <div class="scroller">
        <div
            class="scroller-container"
        >
          <div class="scroller-header">
            <span>新品上架</span><span  @click="linkTo('/searchResult')">更多<i>></i></span>
          </div>
          <div class="scroller-wrapper scroller-xinpin">
            <div class="scroller-item">
              <div
                class="scroller-item__bd"
                v-for="(item,i) in newList"
                :key="i"
  
                @click="linkTo('/goods_container',item.id)"
              >
                <div
                  class="img"
                  :style="{backgroundImage:'url(' +item.exampleImageUrl.fileUrl+')'}"
                ></div>
                <span class="scroller-item__bd--desc">{{item.title}}</span>
                <div class="scroller-item__bd--price">
                  <div>积分：<p>{{item.salePrice}}</p></div>
                  <span class="price-num">兑换量：{{item.saleCount}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <section class="home-tabbar">
      <tabbar :activeIndex="0"></tabbar>
    </section>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import tabbar from "@/components/common/tabbar.vue";
import recommend from "@/components/common/recommend.vue";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
import { Search, Swiper, SwiperItem, Scroller, Group, Cell } from "vux";
const test = require("../../images/test.png");
export default {
  name: "home",
  data() {
    return {
      menuList: null,
      //"弹窗广告
      popState: false,
      popObj: {},
      //首页banner图
      bannerState: false,
      bannerArr: [],
      newList: [],
      hotList:[],
      isLoading: false,
      banners: [],
      cateArr:[],
      quicknavs: [],
      liveState: false,
      activeIndex:0,
      pageIndex:1,
      pageCount:0,
      preList:[]
    };
  },
  mounted() {
   let that = this;
    window.addEventListener("scroll", function (val) {
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;//滚动条距离顶部的高度
      var scrollHeight = document.body.scrollHeight;
      if (that.liveState) return; //当前页面的总高度
      console.log(val,scrollTop,scrollHeight)
      if (scrollTop*2+200 >= scrollHeight) {
        if (that.pageCount <= that.pageIndex) return;
        that.pageIndex++;
        that.liveState = true;
        if(that.activeIndex == 0){
          that.getHot();
        }else if(that.activeIndex == 1){
          that.getHot();
        }else{
          that.getNew();
        }
      } else if (scrollTop <= 0) {
      }
    });
  },
  created() {
    this.$vux.loading.show({
      text: "加载中"
    });
    this.getBanner()
    this.activeIndex = 0;
    this.getHot();
    this.cateGory();
  },
  methods: {
    returnName(val){
      let str;
      if(val == 'RMB'){
        str = '¥  '
      }else if(val == 'RMB_ORDINARY'){
        str = '¥  '
      }else if(val == 'GOLD'){
        str = '红包:'
      }else {
        str = '红包:'
      }
      return str
    },
    returnImg(obj){
      console.log(obj,'ddd')
    },
    activeIndexSelect(num){
      if(num == this.activeIndex) return
      this.$vux.loading.show({
        text: "加载中"
      });
      this.pageIndex = 1
      this.hotList = []
      if(num == 0){
        this.getHot();
      }else if(num == 1){
        this.getNew();
      }else{
        this.preGetGood()
      }
      this.activeIndex = num
    },
    cateGory() {
      let param = {
        isEnable: "y",
        pageIndex: 1,
        pageSize: 1000,
        parentId: 0
      };
      let url = CONSTANT.LIST.CATEGORYLIST;
      common.post(url, param, res => {
        if (res.code == 200) {
          this.quicknavs = res.data.bussData;
        }
      });
    },
    advertClick(obj) {
      if (obj.adType == "OUTER_CHAIN") {
        window.location.href = 'www.baidu.com'
      } else if (obj.adType == "PRODUCT") {
        this.$router.push({
          path: "goods_container",
          query: { id: obj.value }
        });
      }
    },
    linkTo(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    linkToR(path) {
      if(this.activeIndex != '2'){
        this.linkTo(path)
        return
      }
      this.$router.push({
        path: path,
        query: {
          all: 'RMB_ORDINARY'
        }
      });
    },
    getBanner() {
      let url = CONSTANT.LIST.bannerList;
      common.post(url, "", res => {
        if (res.code == 200) {
          let arr = res.data.bussData;
          this.bannerArr = arr
        
        }
      });
    },
    getNew() {
      let url = CONSTANT.LIST.PRODUCTPAGE;
      common.post(url, {
        pageIndex:this.pageIndex,
        pageSize:10,
        isNew:'y',
        productType:''
      }, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          let data = res.data.bussData,arr = []
          this.pageCount = res.data.pageCount
          data.map(item=>{
            if(item.productType != 'RMB'&&item.productType != 'RMB_ORDINARY'){
              arr.push(item)
            }
          })
          this.hotList = this.hotList.concat(arr);
          this.liveState = false;
        }
      });
    },
    getHot() {
      let url = CONSTANT.LIST.PRODUCTPAGE;
      common.post(url, {
        pageIndex:this.pageIndex,
        pageSize:10,
        isHot:'y'
      }, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          let data = res.data.bussData,arr = []
          this.pageCount = res.data.pageCount
          data.map(item=>{
            if(item.productType != 'RMB'&&item.productType != 'RMB_ORDINARY'){
              arr.push(item)
            }
          })
          this.hotList = this.hotList.concat(arr);
          this.liveState = false;
        }
      });
    },
    preGetGood() {
      let url = CONSTANT.LIST.PRODUCTPAGE;
      common.post(url, {
        pageIndex:this.pageIndex,
        pageSize:10,
        productType: "RMB_ORDINARY"
      }, res => {
        this.$vux.loading.hide();
        if (res.code == 200) {
          let data = res.data.bussData,arr = []
          this.pageCount = res.data.pageCount
          this.hotList = this.hotList.concat(data);
          this.liveState = false;
        }
      });
    },
  },
  components: {
    recommend,
    tabbar,
    Search,
    Swiper,
    Scroller,
    SwiperItem,
    Group,
    Cell,
    vueWaterfallEasy
  }
};
</script>

<style lang="less">
.home{
  min-height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem;
  .search-top{
    height: .88rem;
    background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
    padding-top: .3rem;
    .search-list{
      width:6.9rem;
      height:.58rem;
      background:rgba(255,255,255,1);
      box-shadow:0px .03rem 7px 0px rgba(0, 0, 0, 0.1);
      border-radius:.29rem;
      background-color: #F7F7F7;
      margin:  .0 auto;
      font-size:.3rem;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      align-items: center;
      border: 1px solid #F7F7F7;
      img{
        width: .36rem;
        color: #F7F7F7;
         margin:  0 .1rem 0 .2rem;
      }
    }
  }
}

   .recommend-item-img {
      box-sizing: border-box;
      margin: 0.2rem 0.18rem 0.29rem 0.08rem;
      width: 3.16rem;
      height: 3.26rem;
    }

    .item-detai {
      display: flex;
      flex-direction: column;
      // position: absolute;
      // bottom: 0.2rem;
      .text1 {
        margin-left: 0.12rem;
        height: 0.27rem;
        width: 3.05rem;
        overflow: hidden;
        font-size: 0.27rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 0.27rem;
        margin-bottom: 0.24rem;
      }
      .text2 {
        display: inline-block;
        margin-bottom: 0.17rem;
        margin-left: 0.12rem;
        height: 0.25rem;
        display: flex;
        align-items: center;

        .text2-yuan {
          display: inline-block;
          height: 0.16rem;
          font-size: 0.2rem;
          font-family: PingFang-SC-Medium;
          color: rgba(126, 86, 198, 1);
          line-height: 0.16rem;
          margin-right: 0.07rem;
        }
        .text2-price {
          display: inline-block;
          height: 0.25rem;
          font-size: 0.32rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: #FF7268;
          line-height: 0.25rem;
        }
      }
      .text3 {
        display: flex;
        font-display: row;
        margin-left: 0.12rem;
        .text3-price {
          height: 0.19rem;
          font-size: 0.22rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
          line-height: 0.19rem;
        }
        .text3-number {
          position: absolute;
          right: 0;
          height: 0.21rem;
          font-size: 0.22rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 0.21rem;
          text-align: center;
        }
      }
    }

.mask-in {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(7, 17, 27, 0.5);
  img {
    display: block;
    position: fixed;
    width: 6.22rem;
    height: 6.6rem;
    z-index: 2000;
    top: 50%;
    left: 50%;
    transform: translate(-48%, -65%);
  }
}
.mask-out {
  display: none;
}
input,
p {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
span,
i,
p {
  display: inline-block;
  font-family: PingFang-SC;
}
i {
  position: relative;
  bottom: 0.03rem;
}
.home-banner {
  position: relative;
  .index-banner {
    height: 100%  ;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
.home-header {
  position: absolute;
  width: 100%;
  top: 0;
  height: 1.28rem;
  display: flex;
  align-items: center;
  z-index: 555;
}
.searchbar {
  position: relative;
  top: -0.02rem;
  width: 75%;
  height: 0.6rem;
  margin-left: 0.5rem;
  input::-webkit-input-placeholder {
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
.serchbar-icon,
.searchbar-input {
  position: absolute;
}
.serchbar-icon {
  display: inline-block;
  width: 0.33rem;
  height: 0.33rem;
  border-radius: 0.33rem;
  background: url("../../images/home/sousuo.png") no-repeat center;
  background-size: contain;
  left: 0.24rem;
  top: 0.15rem;
  z-index: 2;
}
.searchbar-input {
  width: 6.5rem;
  height: 0.6rem;
  border-radius: 40rem;
  text-indent: 0.7rem;
  font-size: 0.27rem;
  z-index: 1;
  background-color: rgba(255, 255, 245, 0.2);
}
.messagebox {
  width: 0.44rem;
  height: 0.41rem;
  margin-left: 0.7rem;
  background: url("../../images/home/nav_btn_set.png") no-repeat center;
  background-size: contain;
}
.vux-icon-dot {
  background-color: #d7cfca !important;
}
.vux-icon-dot.active {
  background-color: #FF7268 !important;
}
// 已售罄
.saleout {
  .img {
    position: relative;
    background: rgba(0, 0, 0, 1);
    opacity: 0.35;
    &::after {
      position: absolute;
      width: 100%;
      content: "已售罄";
      font-size: 0.28rem;
      font-family: PingFang-SC;
      font-weight: 100;
      color: rgba(255, 255, 255, 1);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.home-quicknav {
  background: white;
  ul {
    display: flex;
    padding: 0.18rem 0 .1rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.quicknav-item {
  text-align: center;
  flex: 1;
  .quinav-item__text {
    font-size: 0.24rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
  }
  img {
    height: 0.89rem;
    width: 0.89rem;
    // border-radius: 0.6rem;
    margin-bottom: 0.03rem;
  }
}
.scroller-container {
  border-top: 0.2rem solid #f8f8f8;
  background-color: #fff;
}
.scroller-midbanner {
  line-height: 0;
  border-top: 0.2rem solid #f8f8f8;
  img {
    width: 100%;
    height: 3.2rem;
  }
}
.scroller-header {
  background: white;
  height: 0.8rem;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  box-sizing: border-box;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  span {
    font-size: 0.28rem;
    color: #333333;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .arrow{
    margin: 0 .1rem;
  }
  .tab-list{
    &.active{
      color: #FF7268;
      font-size: .34rem;
    }
  }
  span:last-child {
    flex: 1;
    text-align: right;
    color: #999999;
    i {
      font-size: 0;
      height: 0.18rem;
      width: 0.18rem;
      background: url("./../../images/left.png") center;
      background-size: contain;
      transform: rotateZ(180deg) translateY(-50%);
    }
  }
  .scroller-header__counter {
    flex: 2;
    color: #999999;
    margin-left: 0.1rem;
    p {
      width: 0.38rem;
      height: 0.38rem;
      line-height: 0.38rem;
      text-align: center;
      background-color: #FF7268;
      color: #fff;
      margin-top: 0.02rem;
      border-radius: 0.03rem;
    }
  }
}
.home .scroller-item {
  background: white;
  height: inherit !important;
  position: relative;
  font-family: PingFang-SC-Medium;
  text-align: justify !important;
  line-height: inherit;
  // margin-left: .2rem;
}
// 即将上架
#onshelf {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 0.99rem;
  height: 0.31rem;
}
.scroller-item__bd {
  position: relative;
  width: 3.2rem;
  float: left;
  // margin-right: .4rem;
  //   float: left;
  text-align: center;
  // margin-bottom: .1rem;
  width: 50%;
  box-sizing: border-box;
  .scroller-item__body{
    padding: 0 .2rem .1rem;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .img {
    height: 3.2rem;
    width: 3.2rem;
    border-radius:.2rem;
    background-size: 100% 100%;
    background-image: url("../../images/no-data.png");
    background-repeat: no-repeat;
  }
  .scroller-item__bd--renshu {
    position: absolute;
    z-index: 2;
    display: inline-block;
    width: 0.7rem;
    height: 0.3rem;
    font-size: 0.2rem /* 5/150 */;
    white-space: nowrap;
    line-height: 0.3rem;
    text-align: left;
    padding-left: 0.04rem;
    // text-indent:0.05rem;
    color: #fff;
    font-weight: lighter;
    font-family: PingFang-SC-Regular;
    background: url("../../images/home/home_renshu.png") no-repeat center;
    background-size: contain;
  }
  .scroller-item__bd--desc {
    margin-top: 0.09rem;
    height: 0.62rem;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size:.3rem;
    font-family:PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 0.32rem;
    word-break: break-all;
    margin-bottom: .1rem;
  }
  .scroller-item__bd--price {
    width: 100%;
    height: 0.5rem;
    text-align: left;
    display: flex;
    align-items: center;
    font-size: .2rem;
    white-space: nowrap;
    justify-content: space-between;
    
    color:#999999;
    .price-text{
     color:#FF7268;
    }
    p:first-child {
      margin-right: 0.05rem;
      font-size:.36rem;
      font-family:PingFang SC;
      font-weight:500;
      color:#FF7268;
      margin-left: .1rem;
    }
    // p:last-child {
    //   font-size: 0.24rem;
    //   font-family: PingFang-SC-Medium;
    //   font-weight: 500;
    //   text-decoration: line-through;
    //   color: rgba(153, 153, 153, 1);
    // }
  }
}
// .scroller-item__bd:first-child {
//   margin-left: 0.1rem;
// }
.box2-wrap {
  height: 3rem;
  overflow: hidden;
}
.recmd-title {
  height: 0.85rem;
  line-height: 0.85rem;
  text-align: center;
  font-size: 0.26rem;
  color: #666666;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  background: rgba(250, 250, 250, 1);
}
.img-box{
  width: 3.6rem!important;
  padding: 0!important;
  
  a{
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0)!important;
    margin-bottom: .2rem!important;
    padding-left: .18rem!important;
    background-color: #f7f7f7;
  }
  // &:nth-child(2n){
  //   margin-left: .18rem!important;
  // }
}
.vue-waterfall-easy-scroll{
height: 100%;
overflow-x: hidden;
overflow-y: hidden!important;
}
  .vue-waterfall-easy-container{
    padding-bottom: 1rem;
    padding-left: .06rem!important;
    overflow: hidden;
  }
.recommend-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 3.42rem;
    // height: 5.24rem;
    background-color: #fff;
    .recommend-item-img {
      box-sizing: border-box;
      width: 3.42rem;
      margin: 0;
    }

    .item-detail {
      display: flex;
      flex-direction: column;
      height: 1.8rem;
      .text1 {
        height:0.62rem;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-top: .2rem;
        margin-left: 0.12rem;
        width: 3.05rem;
        font-size: 0.27rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 0.32rem;
        margin-bottom: 0.24rem;
      }
      .text2 {
        display: inline-block;
        margin-bottom: 0.17rem;
        margin-left: 0.12rem;
        height: 0.25rem;
        display: flex;
        align-items: center;

        .text2-yuan {
          display: inline-block;
          height: 0.16rem;
          font-size: 0.2rem;
          font-family: PingFang-SC-Medium;
          color: rgba(126, 86, 198, 1);
          line-height: 0.16rem;
          margin-right: 0.07rem;
        }
        .text2-price {
          display: inline-block;
          height: 0.25rem;
          font-size: 0.32rem;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: #FF7268;
          line-height: 0.25rem;
        }
      }
      .text3 {
        display: flex;
        font-display: row;
        margin-left: 0.12rem;
        .text3-price {
          height: 0.19rem;
          font-size: 0.22rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          color: rgba(153, 153, 153, 1);
          line-height: 0.19rem;
        }
        .text3-number {
          position: absolute;
          right: .13rem;
          height: 0.21rem;
          font-size: 0.22rem;
          font-family: PingFang-SC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 0.21rem;
          text-align: center;
        }
      }
    }
  }
.home-content-hot {
  margin-bottom: 2rem;
}
</style>
